import React, { useState, useEffect } from 'react';
import { Row, Typography, Select, Col, Input } from 'antd';
import { BaseTable, utils } from '@/components/BaseTable';
import PageEmpty from '@/components/PageEmpty';
import {
  CONSTANT_TAB_KEY1, // 投资正式版
  CONSTANT_TAB_KEY2, // 调整版
  CONSTANT_TAB_KEY3, // 实际版
} from '../utils/constant';

import { getProjectData } from '../utils/request';

const { Text } = Typography;

const Page = props => {
  const { yearMonth, setExportExcel } = props;
  // 版本和 VS版本
  const [selectState, setSelectState] = useState({
    versionType: CONSTANT_TAB_KEY2,
    vsVersionType: CONSTANT_TAB_KEY3,
  });
  const [loading, setLoading] = useState(true);
  const [searchValue, setSearchValue] = useState('');
  const [tableMap, setTableMap] = useState({
    headerRenderer: [],
    columns: [],
    data: [],
  });
  // 获取列表数据
  const getData = async (params, callback) => {
    setLoading(true);
    const res = await getProjectData(params, searchValue);
    const { headerRenderer, columns, data } = res;
    setExportExcel(!data.length);
    setTableMap({
      headerRenderer,
      columns,
      data,
    });
    setLoading(false);
    if (callback) callback();
  };
  useEffect(() => {
    // 初始化(或者月份改变)获取数据,并且恢复 select 恢复默认值
    getData({
      versionType: selectState.versionType,
      vsVersionType: selectState.vsVersionType,
      yearMonth,
    });
  }, [yearMonth, searchValue]);

  // 切换版本 VS 版本
  const selectChange = selectData => {
    const selectArr = selectData.split('-');
    getData(
      {
        versionType: selectArr[0],
        vsVersionType: selectArr[1],
        yearMonth,
      },
      () => {
        setSelectState({
          versionType: selectArr[0],
          vsVersionType: selectArr[1],
        });
      },
    );
  };

  const rowRenderer = ({ rowData, rowIndex, cells, columns }) => {
    const cell = cells[0];
    if (rowData.rowSpan) {
      const style = {
        ...cell.props.style,
        backgroundColor: 'white',
        height: rowData.rowSpan * 36 - 1,
        alignSelf: 'flex-start',
        zIndex: 1,
      };
      cells[0] = React.cloneElement(cell, { style });
    }
    return cells;
  };

  return (
    <>
      <Row type="flex" gutter={[5, 5]} justify="space-between" style={{ marginBottom: 10 }}>
        <Col>
          <Text>显示：&ensp;</Text>
          <Select
            size="small"
            onChange={selectChange}
            dropdownMatchSelectWidth={false}
            className="version-select"
            value={`${selectState.versionType}-${selectState.vsVersionType}`}
          >
            <Select.Option key="1" value={`${CONSTANT_TAB_KEY2}-${CONSTANT_TAB_KEY3}`}>
              实际版 VS 投资正式版
            </Select.Option>
            <Select.Option key="2" value={`${CONSTANT_TAB_KEY1}-${CONSTANT_TAB_KEY2}`}>
              最新调整版 VS 实际版
            </Select.Option>
            <Select.Option key="3" value={`${CONSTANT_TAB_KEY1}-${CONSTANT_TAB_KEY3}`}>
              最新调整版 VS 投资正式版
            </Select.Option>
          </Select>
        </Col>
        <Col>
          <Input.Search
            size="small"
            placeholder="输入项目名称搜索"
            onSearch={value => setSearchValue(value)}
            loading={loading}
          />
        </Col>
      </Row>
      {loading ? (
        <PageEmpty emptyTitle="加载中" />
      ) : (
        <BaseTable
          subtractHeight="160px"
          fixedColumns={tableMap.columns}
          headerHeight={[30, 30]}
          headerRenderer={utils.getHeaderRenderer(tableMap.headerRenderer, 2)}
          treeData={tableMap.data}
          rowRenderer={rowRenderer}
        />
      )}
    </>
  );
};

export default Page;
